<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../global/header.jsp" %>

<style type="text/css">
#mheader {
    margin: 5px;
}

#t1 {
    width: 99.5%;
    margin: 0px;
    padding: 0px;
}

a {
    color: #ed9200;
}

a:hover {
    color: #ff0;
}

</style>

<!-- header -->
<div id="mheader" >
    <table id="t1" >
        <tr>
            <td >当前登录：&nbsp;<span id="uname" style="font-weight: bold;"></span></td>
            <td align="right">
                <span id="calendar" ></span>&nbsp;|&nbsp;
                <a href="javascript:void(0);" >帮助</a>&nbsp;|&nbsp;
                <a href="javascript:void(0);" id="link-logout" >退出系统</a>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">

var _firstMenuTree = null;

// load top menus And Initialize Page
var _loadMenuAndInit = function() {
	Ext.Ajax.request({
		url: "common/loadinitmenus.shtm",
		success: function(resp, opts) {
			var initData = Ext.decode(resp.responseText);
			_drawPage(initData);
			if (_firstMenuTree != null) {
				setTimeout(function() {
				    _firstMenuTree.getRootNode().expandChildren(true);
				}, 200);
			}
		}
	});
};

// draw page
var _drawPage = function(initData) {
    var cookies = document.cookie.split(";");
    var tmp = null;
    var uname = "";
    for (var i = 0; i < cookies.length; i++) {
        tmp = cookies[i].split("=");
        if (Ext.String.trim(tmp[0]) == "uname") {
            uname = decodeURI(tmp[1]);
            break;
        }
    }

    Ext.getDom("uname").innerHTML = uname;

    // tab panel
    var mainTabs = Ext.create("Ext.tab.Panel", {
        region: "center",
        plain: true,
        margin: '1 1 1 0',
        activeTab: 0,
        layout: "fit",
        items: [{
            title: "我的工作台",
            autoScroll: true,
            items:[{
                title: "工作提醒，常用快捷方式都在这里啦！"
            }]
        }]
    });
    // store to global
    crm.global.tabs = mainTabs;

    // menu item clcik
    var mItemClick = function(v, rcd) {
    	if (rcd.raw.leaf == 0 || rcd.raw.leaf == "0") {
    	    return;
    	}
        var menuId = "tbp_" + rcd.raw.menu_id;
        var tab = Ext.getCmp(menuId);
        if (tab == null) {
            tab = Ext.create("Ext.panel.Panel", {
                id: menuId,
                title: rcd.raw.text,
                closable: true,
                layout: "fit",
                loader: {
                    baseParams: {
                        menuId: menuId
                    },
                    autoLoad: true,
                    scripts: true,
                    url: rcd.raw.url
                }
            });
            mainTabs.add(tab).show();
        } else {
            mainTabs.setActiveTab(tab);
        }
    };

    // create items
    var createItems = function(item) {
        var store = Ext.create("Ext.data.TreeStore", {
        	fields: [
          	     {name:"id", type:"string"},
          	     {name:"menu_id", type:"string"},
                 {name:"icon", type:"string"},
                 {name:"url", type:"string"},
                 {name:"text", type:"string"},
                 {name:"leaf", type:"boolean"},
            ],

        	proxy: {
        		type: "ajax",
        		url: "common/loadmenus.shtm",
        		reader: {
        			root: "menus"
        		}
        	},
        	nodeParam: "parentId",
        	root: {
        		expanded: true,
        		id: item.id,
        		menu_id: item.menu_id,
        		text: item.text,
        		icon: item.icon,
        		url: item.url,
        		leaf: item.leaf
        	}
        });

        var treePanel = Ext.create("Ext.tree.Panel", {
        	store: store,
            region: "center",
            rootVisible: false,
            border: false,
            listeners: {
                itemclick: {
                    fn : mItemClick
                }
            }
        });
        return treePanel;
    };

    // menu data
    var topMenuDatas = initData.topMenus;
    var topMenus = [];
    for (var i = 0; i < topMenuDatas.length; i++) {
    	var tree = createItems(topMenuDatas[i]);
    	if (i == 0) {
    		_firstMenuTree = tree;
    	}
        var menu1 = Ext.create("Ext.panel.Panel", {
            title : topMenuDatas[i].text,
            layout: "border",
            items: tree
        });
        topMenus.push(menu1);
    }

    Ext.create("Ext.Viewport", {
        layout: "border",
        items: [{
                xtype: "box",
                region: "north",
                contentEl: "mheader",
                height: 40
            },{
                region: "west",
                title: "菜单",
                border: true,
                split: true,
                margins: "1 0 1 1",
                width: 240,
                minWidth: 200,
                maxWidth: 450,
                collapsible: true,
                animCollapse: true,
                layout: "accordion",
                items: topMenus
            },
            mainTabs
        ],
        renderTo: Ext.getBody()
    });

    var today = new Date();
    var fdate = today.getFullYear() + "年";
    var tVal = today.getMonth() + 1;
    fdate += ((tVal < 10 ? "0" + tVal : tVal) + "月");
    tVal = today.getDate();
    fdate += ((tVal < 10 ? "0" + tVal : tVal) + "日");
    fdate += " 星期" + ["日", "一", "二", "三", "四", "五", "六"][today.getDay()];
    Ext.getDom("calendar").innerHTML = fdate;
};

// page load ready
Ext.onReady(function() {
	_loadMenuAndInit();
});
</script>

<%@ include file="../global/footer.jsp" %>

